<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-set</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>v-set指令</h1>
    <span>{{count}}</span>
    <span>{{goodName}}</span>
    <ul>
        <li v-for="ar in arr">{{ar}}</li>
    </ul>
    <p><button onclick="add()">增加</button></p>
</div>
<script>
    //在构造器外部声明数据
    var outData = {
        count : 1,
        goodName : 'car',
        arr : ['aaa','bbb','ccc']
    };

    var app = new Vue({
        el : '#app',
        //引入外部数据
        data: outData
    });

    //在外部改变数据的三种方式

    function add() {
        //1:使用Vue.set进行改变
        // Vue.set(outData,'count',5);
        //2:使用Vue对象的方法进行添加
        // app.count++;
        //3:直接操作外部数据
        // outData.count++;

        //由于javascript的先暂时,vue不能自动检测以下变动的数组
        // app.arr[1] = 'ddd';
        Vue.set(app.arr,1,'ddd');
    }
</script>

</body>
</html>